<!--  -->
<template>
  <div class="modi-pwd">
      <!-- <HeaderTop title="修改密码"></HeaderTop> -->
      <div class="pwd-title">修改登录密码前需验证您的身份信息</div>
      <div class="pwd-list">
        <section class="login_message">
            <!-- <input type="tel" maxlength="11" class="tel"> -->
            <span>{{myPhone}}</span>
            <div class="get_verification" :class="{btn:isGray==true}" @click.prevent="getCode">{{computeTime > 0 ? `已发送(${computeTime}s)` : '获取验证码'}}</div>
        </section>
        <section class="login_verification">
            <input type="tel" maxlength="8" placeholder="输入验证码" class="veri" v-model="sms">
        </section>
        <section class="login_password">
            <!-- 可见密码 -->
            <input type="text" v-if="showPwd" class="pw" maxlength="6" v-model="password" placeholder="输入新密码">
            <!-- 不可见密码 -->
            <input type="password" v-if="!showPwd" class="pw1" maxlength="6" v-model="password" placeholder="输入新密码">
            <div class="icon">
                <img class="chakan" v-if="showPwd" @click="showPwd=false" src="../../assets/img/chakan1.png" alt="">
                <img class="close" v-if="!showPwd" @click="showPwd=true" src="../../assets/img/chakan.png" alt="">
            </div>
        </section>
      </div>
      <div class="pwd-title">密码6-15位</div>
      <div class="advice-btn">
          <button class="sub" @click="savePwd">保存</button>
      </div>
  </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'
import {mapState} from 'vuex'
import { setInterval, clearInterval } from 'timers';
export default {
    data () {
        return {
            showPwd:false, //是否展示明文密码
            myPhone:null,
            computeTime:0, //倒计时时间
            userId:null,
            token:'',
            password:null, //密码
            sms:null, //验证码
            isGray:false
        };
    },

    // components: {
    //     HeaderTop
    // },
    mounted(){
        this.userId = this.userInfo.userInfo.id
        this.token = this.userInfo.token
        this.myPhone = this.userInfo.userInfo.phone
    },
    computed: {
        ...mapState(['userInfo'])
    },

    methods: {
        // 异步发送验证码
        async getCode(){
            console.log(111)
            if(!this.computeTime){
                this.computeTime = 120
                this.isGray = true
                this.IntervalId = setInterval(()=>{
                    this.computeTime --
                    if(this.computeTime <= 0){
                        clearInterval(this.IntervalId)
                        this.isGray = false
                    }
                },1000)
                const result = await this.API.reqSendCode(this.myPhone)
                console.log(result)
                if(result.retCode !== '000'){
                    if(this.computeTime){
                        this.computeTime = 0
                        clearInterval(this.IntervalId)
                        this.IntervalId = undefined
                    }
                    this.$toast(result.retMsg);
                    // this.$dialog.alert({
                    //     meaasge:result.retMsg
                    // })
                }
            }
        },
        // 保存修改的密码
        async savePwd(){
            const {userId,token,password,sms} = this
            if(!this.sms){
                this.$toast('请输入验证码');
                // this.$dialog.alert({
                //     message: '输入验证码'
                // })
                return 
            }
            if(!this.password){
                this.$toast('请输入新密码');
                // this.$dialog.alert({
                //     message: '输入新密码'
                // })
                return 
            }
            console.log(userId,token,password,sms)
            const result = await this.API.reqModiProPwd({userId,token,password,sms})
            console.log('修改密码',result)
            if(result.retCode === '000'){
                this.$toast('密码修改成功 请重新登录');
                this.$router.replace('/login')
                // this.$dialog.alert({
                //     message:'密码修改成功'
                // }).then(()=>{
                //     this.$router.replace('/login')
                // })
            }
            if(result.retCode !== '000'){
                this.$toast(result.retMsg);
                // this.$dialog.alert({
                //     message:result.retMsg
                // })
            }
        }
    }
}

</script>
<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.modi-pwd
    // margin-top 45px
    .pwd-title
        color #666666
        width 100%
        height 47px
        line-height 47px
        margin-left 15px
    .pwd-list
        background #fff
        section 
            height 47px
            line-height 47px
            font-size 15px
            bottom-border-1px(#EEEEEE)
            padding 0 20px
            &.login_message
                display flex
                justify-content space-between
                align-items center
                .get_verification
                    height 31px
                    width 105px
                    line-height 31px
                    background #145B3E
                    color #fff
                    border-radius 5px
                    outline none
                    border 1px solid transparent
                    text-align center
                    &.btn
                        background #656565
            &.login_password
                display flex
                justify-content space-between
                .icon
                    display inline-block
                    height 7.5px
                    margin-right 5px
    .advice-btn
        margin-top 15px
        display flex 
        justify-content center
        .sub
            border 1px solid #e4e4e4
            width 305px
            border-radius 100px
            height 47px
            font-size 14px
            background #145B3E
            color #fff
</style>